<template>
  <div :class="token ? 'common-video' : 'common-unvideo'">
    <VideoPlay v-if="token" :recommendList="friendList"></VideoPlay>
    <NoAllow v-else></NoAllow>
  </div>
</template>

<script>
import NoAllow from "@/components/NoAllow.vue";
import { getFriendListApi } from "@/api/friend";
import { getWorksRandomListApi } from "@/api/recommend";
import VideoPlay from "@/components/VideoPaly.vue";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      friendList: [],
      token: getToken(),
    };
  },
  components: {
    VideoPlay,
    NoAllow,
  },
  created() {
    if (this.token) {
      this.getFriendListFun();
    }
  },
  mounted() {
    var rightmain = document.querySelector("#rightmain");
    rightmain.style.position = "static";
    setTimeout(() => {
      if (this.token) {
        // console.log(this.token,'token');
        rightmain.style.position = "absolute";
      } else {
        rightmain.style.position = "static";
      }
    }, 500);
  },
  methods: {
    getFriendListFun() {
      getFriendListApi({ userId: this.$store.state.userInfo.userId }).then(
        (res) => {
          if (res.data.code == 200) {
            if (res.data.data == null || res.data.data.length == 0) {
              // 提示用户将为您提供推荐数据
              this.$message({
                type: "info",
                message: "将为您提供推荐作品",
              });
              this.getRandomWorksList();
            } else {
              this.friendList = res.data.data;
            }
          }
        }
      );
    },
    getRandomWorksList() {
      getWorksRandomListApi().then((res) => {
        if (res.data.code == 200) {
          this.friendList = res.data.data;
        }
      });
    },
  },
};
</script>

<style>
.common-video {
  width: 100%;
  height: 100%;
}
.common-unvideo {
  width: 100%;
  height: 100%;
  position: fixed;
}
</style>
